<html>

<head>
    <meta charset="utf-8">
    <title>新闻详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../default/css/index.css"/>
    <link rel="stylesheet" href="../default/css/animat.min.css">
    <!--App自定义的css-->
    <style type="text/css">
        /*.mui-content {
            background-image: linear-gradient(to top right, #32a6ff 50%, #fff 50%);
            background-size: 100% calc(100% - 100vh + 5px);
            background-repeat: no-repeat;
        }
        .mui-content::after {
            content: '';
            position: fixed;
            top: 3px;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            z-index: -1;
        }*/
        .mui-preview-image.mui-fullscreen {
            position: fixed;
            z-index: 20;
            background-color: #000;
        }

        .mui-preview-header,
        .mui-preview-footer {
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 10;
        }

        .mui-preview-header {
            height: 44px;
            top: 0;
        }

        .mui-preview-footer {
            height: 50px;
            bottom: 0px;
        }

        .mui-preview-header .mui-preview-indicator {
            display: block;
            line-height: 25px;
            color: #fff;
            text-align: center;
            margin: 15px auto 4;
            width: 70px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 12px;
            font-size: 16px;
        }

        .mui-preview-image {
            display: none;
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .mui-preview-image.mui-preview-in {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }

        .mui-preview-image.mui-preview-out {
            background: none;
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
        }

        .mui-preview-image.mui-preview-out .mui-preview-header,
        .mui-preview-image.mui-preview-out .mui-preview-footer {
            display: none;
        }

        .mui-zoom-scroller {
            position: absolute;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            -webkit-backface-visibility: hidden;
        }

        .mui-zoom {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .mui-slider .mui-slider-group .mui-slider-item img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }

        .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
            width: 100%;
        }

        .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
            display: inline-table;
        }

        .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
            display: table-cell;
            vertical-align: middle;
        }

        .mui-preview-loading {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }

        .mui-preview-loading.mui-active {
            display: block;
        }

        .mui-preview-loading .mui-spinner-white {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            height: 50px;
            width: 50px;
        }

        .mui-preview-image img.mui-transitioning {
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
        }

        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @-webkit-keyframes fadeOut {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        p img {
            max-width: 100%;
            height: auto;
        }

        .mui-content {
            background: #fff;
        }

        .mui-content-padded img {
            border-radius: 5px;
        }

        .gold-coin-box {
            width: 60px;
            height: 60px;
            background: #fff;
            -moz-box-shadow: 0px 4px 16px #333333;
            -webkit-box-shadow: 0px 4px 16px #333333;
            box-shadow: 0px 4px 16px #333333;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms_border-radius: 50%;
            display: inline-block;
            position: fixed;
            background: url("https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/gold-coin-1.png") no-repeat;
            background-size: 100% 100%;
            right: 20px;
            bottom: 20px;
        }

        .gold-coin-bo_in {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms_border-radius: 50%;
            overflow: hidden;
            position: relative;
        }

        .gold-coin-bo-c {
            width: 60px;
            height: 60px;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 0;
            background: rgba(253, 194, 35, 0.7);
        }

        /*推荐*/
        .mui-card-footer, .mui-card-header {

        }

        .mui-table-view-cell {
            padding: 12px 15px;
            padding-bottom: 5px;
        }

        .mui-table-view-cell:after {
            right: 15px;
            background-color: #f5f5f5;
        }

        .mui-card {
            box-shadow: none;
            margin: 0;
        }

        .mui-card-footer:before, .mui-card-header:after {
            height: 0;
        }

        .mui-card-footer:before, .mui-card-header:after {
            height: 0;
        }

        .mui-card-header {
            font-weight: 550;
            font-size: 16px;
            padding: 0 15px;
        }

        .mui-card-footer {
            color: #ccc;
        }

        input[type=search] {
            border-radius: 20px;
        }

        /*.gold-coin-b_num {
            color: #404040;
            font-size: 20px;
            line-height: 1.5;
            font-weight: bold;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            text-align: center;
            width: 100%;
        }*/
        /*遮罩蒙版*/
        .mui-table-view .mui-media-object {
            max-width: initial;
            width: 100px;
            height: 70px;
            border-radius: 5px;
        }

        .meta-info {
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: 8px;
            color: #8f8f94;
        }

        .meta-info .author,
        .meta-info .time {
            display: inline-block;
        }

        .meta-info .time {
            margin-left: 10px;
        }

        .mui-table-view:before,
        .mui-table-view:after {
            height: 0;
        }

        .mui-content>.mui-table-view:first-child {
            margin-top: 1px;
        }

    </style>

</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
</header>
<div class="mui-content">
    <div class="nwestitle-box">
        <h4 id="newstitle">----</h4>
        <span id="authorName">----</span><span id="writingTime" style="margin-left: 20px;">--/--/-- --:--</span>
    </div>
    <div class="mui-content-padded" id="newcents">

    </div>

    <div class="modtai-control-box">
        <div class="day-task-box">
            <div class="day-task-icon-clos mui-text-right"><i class="mui-icon mui-icon-closeempty"></i></div>
            <div class="day-task-title">
                <h4>今日阅读任务</h4>
                <p>进度条达到100%，将获得额外奖励</p>
            </div>
            <div class="day-task-progressbar-box mui-text-right">
                <span class="mui-badge mui-badge-primary">12</span>
                <div id="demo1" class="mui-progressbar">
                    <span></span>
                </div>
            </div>
            <div class="day-task-centan">
                <div><i class="mui-icon icon iconfont icon-xinwen"></i><span>看文章</span><span>13%</span></div>
                <div><i class="mui-icon icon iconfont icon-shipin"></i><span>看视频</span><span>98%</span></div>
            </div>
            <div class="day-task-shuo">
                <h4>规则介绍</h4>
                <p>1，这里是规则规则规则</p>
                <p>2，这里是规则规则规则</p>
                <p>3，这里是规则规则规则</p>
            </div>
            <div class="day-task-subm-box">
                <button type="button" class="mui-btn mui-text-right">继续阅读</button>
            </div>
        </div>
    </div>
    <div class="modtai modtai-control-hied"></div>
    <div class="top-shadow"></div>
    <div class="news-box">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="loding.html">
                <img class="mui-media-object mui-pull-right" data-lazyload="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/news_test_1.jpg" data-preview-src=""
                     data-preview-group="1">
                <div class="mui-media-body">
                    <div class="mui-ellipsis-2">新闻标题</div>
                </div>
                <div class="meta-info">
                    <div class="author">新闻作者</div>
                    <div class="time">新闻时间</div>
                </div>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <img class="mui-media-object mui-pull-right" data-lazyload="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/news_test_1.jpg" data-preview-src=""
                     data-preview-group="1">
                <div class="mui-media-body">
                    <div class="mui-ellipsis-2">新闻标题</div>
                </div>
                <div class="meta-info">
                    <div class="author">新闻作者</div>
                    <div class="time">新闻时间</div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <img class="mui-media-object mui-pull-right" data-lazyload="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/news_test_1.jpg" data-preview-src=""
                     data-preview-group="1">
                <div class="mui-media-body">
                    <div class="mui-ellipsis-2">踩踩踩踩踩踩从踩踩踩踩踩踩从踩踩踩踩踩踩从踩踩踩踩踩踩从</div>
                </div>
                <div class="meta-info">
                    <div class="author">踩踩踩踩踩踩从</div>
                    <div class="time">踩踩踩踩</div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <img class="mui-media-object mui-pull-right" data-lazyload="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/news_test_1.jpg" data-preview-src=""
                     data-preview-group="1">
                <div class="mui-media-body">
                    <div class="mui-ellipsis-2">新闻标题</div>
                </div>
                <div class="meta-info">
                    <div class="author">新闻作者</div>
                    <div class="time">新闻时间</div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <a href="https://www.baidu.com/">
                    <img class="mui-media-object mui-pull-right" data-lazyload="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/news_test_1.jpg" data-preview-src=""
                         data-preview-group="1">
                    <div class="mui-media-body">
                        <div class="mui-ellipsis-2">新闻标题</div>
                    </div>
                    <div class="meta-info">
                        <div class="author">新闻作者</div>
                        <div class="time">新闻时间</div>
                    </div>
                </a>
            </li>
        </ul>
    </div>



</div>

<div class="gold-coin-box modtai-control-show">
    <div class="gold-coin-bo_in">
        <div class="gold-coin-bo-c"></div>
        <!--<div class="gold-coin-b_num">43%</div>-->
    </div>
</div>
</body>
<!---->
<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script src="../default/js/mui.zoom.js"></script>
<script src="../default/js/mui.previewimages.js"></script>
<script src="../default/js/mui.lazyload.js"></script>
<script src="../default/js/mui.lazyload.img.js"></script>
<!--<script src="../default/js/vconsole.js" type="text/javascript" charset="utf-8"></script>-->
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    // var userId= localStorage.getItem('userId');
    mui.previewImage();
    // ajax地址
    var videoId = 0;
    // 获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }

    //获取url中的targetId参数
    var targetId = getUrlParam('targetId');
    console.log(targetId);


    $(function () {
        appdnews(targetId);
    });

    function appdnews(targetId) {
        $.ajax({
            url: website + "/NewsController/findById",
            type: "post",
            dataType: "json",
            data: {id: targetId},
            success: function (data) {
                console.log(data);
                $("#newstitle").html(data.data.newsOptional.title);
                $("#authorName").html(data.data.newsOptional.authorName);
                $("#writingTime").html(data.data.newsOptional.writingTime);

                $("#newcents").html(data.data.newsOptional.newsContent);
            },error:function () {
                mui.showLoading("发生错误,返回首页..","div");
                setTimeout(function () {
                    window.location.href = 'http://newst.whilte.com/index.html';
                },1000)
            }
        });

    }



    // 显示
    mui("body").on('tap', '.modtai-control-show', function () {
        $('.modtai-control-hied').css('display', 'block');
        $('.modtai-control-box').css('display', 'inline-table');
        $('.modtai-control-box').addClass('animated fadeInUp');
        setTimeout(function () {
            $('.modtai-control-box').removeClass('animated fadeInUp');
        }, 500)
    });
    // 隐藏
    mui("body").on('tap', '.modtai-control-hied', function () {
        $('.modtai-control-hied').css('display', 'none');
        $('.modtai-control-box').addClass('animated fadeOutDown');
        setTimeout(function () {
            $('.modtai-control-box').css('display', 'none');
            $('.modtai-control-box').removeClass('animated fadeOutDown');
        }, 500)

    });
    mui("body").on('tap', '.mui-text-right', function () {
        $('.modtai-control-hied').css('display', 'none');
        $('.modtai-control-box').addClass('animated fadeOutDown');
        setTimeout(function () {
            $('.modtai-control-box').css('display', 'none');
            $('.modtai-control-box').removeClass('animated fadeOutDown');
        }, 500)

    });

    // 进度条初始化
    mui("#demo1").progressbar({progress: 20}).show();
    // 更改显示进度条:
    mui("#demo1").progressbar().setProgress(50);
    // 设置加载中的默认图片
    (function ($) {
        $(document).imageLazyload({
            placeholder: 'https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/loading.gif'
        });
    })(mui);



    // 判断用户是否在阅读
    var count = 0;
    var outTime = 16; //秒 大约等于10s，最大停留无操作时间
    var activationState = 0;//等于0是页面激活状态,等于1是页面未激活状态
    var allationState = 0;//等于0是页面激活状态,等于1是页面未激活状态
    var animationnub = 0;//动画的当前进度
    var anhundred = 0;//动画的当前进度

    function stop() {
        count++;
        if (count == outTime) {
            count=0;
            activationState=1;
        }
        setTimeout(stop, 1000); //setTimeout是超时调用，使用递归模拟间歇调用
    };

    function go() {
        if(allationState == 0){
            if(activationState== 0){
                animationnub=animationnub+6.66666667;
                $(".gold-coin-bo-c").animate({
                    height: animationnub+"%"
                }, 500);

                if(animationnub>100){
                    anhundred=1;
                    mui.toast('阅读宝准备就绪');
                }

            }
        }
        setTimeout(go, 1000);
    }

    setTimeout(stop, 1000);//1s后执行动画
    setTimeout(go, 1000);

    // 激活页面操纵
    mui(".mui-content").on('tap', 'a', function () {
        var urlhref = $(this).attr('href');
        if(anhundred == 1){
            if(urlhref != null && urlhref != ''){
                allationState = 1;
                activationState=1;
                animationnub = 0;

                $.ajax({
                    url: website + "/UserAndNewsController/addBrowseRecords",
                    type: "post",
                    dataType: "json",
                    data: {
                        userId : userId,
                        newsId:targetId,
                        videoId:videoId
                    },
                    success: function (data) {
                        $(".gold-coin-bo-c").animate({
                            height: animationnub+"%"
                        }, 500);

                        if(data.msg == '获得金币'){
                            mui.toast('获得阅读宝');
                            setTimeout(function () {
                                mui.openWindow({
                                    url: urlhref
                                });
                            },1000);
                            return;
                        }else if(data.msg == '已有,不能再次获得'){
                            mui.toast('这篇文章已经赚过了，换一篇试试吧');
                            setTimeout(function () {
                                mui.openWindow({
                                    url: urlhref
                                });
                            },1000);
                            return;
                        }else {
                            mui.toast('领取阅读宝失败');
                            setTimeout(function () {
                                mui.openWindow({
                                    url: urlhref
                                });
                            },1000);
                        }
                    }
                });
            }
        }else {
            mui.openWindow({
                url: urlhref
            });
        }
    });


</script>

</html>
